<template>
	<view>
		<view class="pr">
			<u-swiper :list="detail.productImageUrl" :circular="true" height="340" v-if="detail.productImageUrl"></u-swiper>
			<image :src="detail.mainImageUrl" class="goods-img" v-else></image>
			<!-- mode="aspectFill"  -->
		</view>
		<view class="padding-lr padding-top-sm">
			<view class="padding bg-white radius-8">
				<view class="flex justify-between align-center">
					<view>
						<text class="font-17 text-theme text-bold">¥{{detail.productPrice}}</text>
						<text class="text-gray font-13 margin-left-sm noUse">￥{{ detail.priceScribing }}</text>
					</view>
					<view class="gxz-lable" v-if="detail.contributionValue">{{detail.contributionValue}}积分</view>
				</view>
				<view class="font-15 text-black3 text-bold margin-top-sm">
					<text>{{detail.productName}}</text>
				</view>
			</view>

			<!-- 生鲜水果类，需展示提示 -->
			<view class="bg-white p-20 m-t-10 border-box b-r-10" v-if="tipsData.length">
				<view class="flex justify-between" @click="tipsShow=true">
					<view class="flex">
						<u-icon name="checkmark-circle" size="18"></u-icon>
						<view class="font-14 m-l-5">生鲜水果质量问题包赔</view>
					</view>
					<u-icon name="arrow-right" size="18"></u-icon>
				</view>
				<view class="flex justify-between m-t-10" @click="tipsShow=true">
					<view class="flex">
						<u-icon name="checkmark-circle" size="18"></u-icon>
						<view class="font-14 m-l-5">不支持七天无理由退货</view>
					</view>
				</view>
			</view>
			<!-- <view class="bg-white radius-8 padding margin-tb-sm text-black3">
				<view class="flex">
					<view>
						<image src="/static/points/icon1.png" mode="widthFix" class="img-48"></image>
					</view>
					<view class="margin-left-sm">
						<view class="font-14">广东省 广州市</view>
						<view class="margin-top-xs text-gray font-11">
							<text>配送至：广东省 广州市</text>
							<text class="m-l-20">运费0元</text>
						</view>
					</view>
				</view>
				<view class="flex align-center margin-tb" @click="toBuy">
					<view>
						<image src="/static/points/icon2.png" mode="widthFix" class="img-48"></image>
					</view>
					<view class="flex align-center justify-between margin-left-sm w-100">
						<view class="font-14">已选：卡其色，M码</view>
						<view>
							<image src="/static/points/arrow-right.png" mode="widthFix" class="img-48"></image>
						</view>
					</view>
				</view>
				<view class="flex align-center">
					<view>
						<image src="/static/points/icon3.png" mode="widthFix" class="img-48"></image>
					</view>
					<view class="margin-left-sm font-14">七天无理由</view>
				</view>
			</view> -->
			<!-- <view class="bg-white radius-8 padding margin-tb-sm text-black3">
				<view class="flex justify-between align-center" @click="toEvaluationList">
					<view class="font-15 text-bold">商品评价（1000+）</view>
					<view>
						<image src="/static/points/arrow-right.png" mode="widthFix" class="img-48"></image>
					</view>
				</view>
				<view class="flex margin-top">
					<view>
						<image src="/static/my/avatar.png" mode="widthFix" class="img-48"></image>
					</view>
					<view class="margin-left-sm">
						<view class="font-14 text-bold">用户名称</view>
						<view class="margin-tb-sm">
							<u-rate count="5" v-model="rateValue"></u-rate>
						</view>
						<view class="font-13">质量好码数正质量好码数正质量好码数正质量好码数正质量好码数正</view>
						<view class="flex flex-wrap">
							<image src="http://couddshopmall.oss-cn-hangzhou.aliyuncs.com/profile/upload/2024/01/09/570029b1426924f1c619c5965294b6b_20240109152613A061.jpg" 
							mode="widthFix" class="img-138 radius-4 margin-top-sm margin-right-sm" v-for="(item, index) in 4" :key="index"></image>
						</view>
					</view>
				</view>
			</view> -->
			<view class="font-16 text-bold text-black3 text-center margin-tb">商品详情</view>
			<view class="radius-8">
				<view>
					<u-parse :content="detail.productDetail" class="uParse"></u-parse>
				</view>
			</view>
		</view>
		<view class="footer-h"></view>
		<!-- btn-grey -->
		<view class="footer">
			<view class="btn btn-grey" v-if="detail.inventory == 0 || !detail.inventory">库存不足</view>
			<view class="btn" @click="toBuy" v-else>立即兑换</view>
		</view>

		<!-- sku弹出窗 -->
		<specs ref="specs" :detail="detail" :show="specsShow" @close="closeSpecs" :type="2" />


		<!-- 生鲜弹出窗 -->
		<u-popup mode="bottom" :show="tipsShow" bgColor="#ffffff" round="20" :cancelShow="false">
			<view class="upgrade-box upgrade-box0">
				<view class="content-box p-30 border-box">
					<view v-for="(item,index) in tipsData" :key="index">
						<view class="m-t-40 w-100 font-24 font-b color-b">{{item.title}}</view>
						<view class="font-13 color-gray line-h-40 m-t-10">{{item.details}}</view>
					</view>
					<view class="btnPopup text-center bg-red1 font-16 font-b" @tap="tipsShow=false">我知道了</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import { productDetail,getSafeguard } from '@/common/api/product.js';
	import specs from '@/pages/points/specs'
	export default {
		components: {
			specs
		},
		data() {
			return {
				specsShow: false,//规格弹窗
				background: {
					backgroundColor: '',
				},
				productId: '',
				detail: {},//商品详情
				currentDate: '', // 当前时间
				scrollTop: 0,
				timeout: 0,
				rateValue: 4,
				tipsShow: false,
				tipsData: []
			};
		},
		onLoad(options) {
			this.productId = options.productId
			this.getProductDetail()
			this.getSafeData()
		},
	
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
			if(this.scrollTop > 44) {
				this.background.backgroundColor = '#E60000'
			} else {
				this.background.backgroundColor = ''
			}
		},
		// 下拉刷新
		async onPullDownRefresh() {
			// 关闭下拉刷新
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		methods: {
			// 获取生鲜保障
			getSafeData(){
				getSafeguard(this.productId).then(res => {
					if(res.code === 200){
						this.tipsData = res.data
					}
				})
			},
			// 跳转评价列表
			toEvaluationList() {
				uni.navigateTo({
					url: '/pages/points/evaluationList'
				})
			},
			// 打开规格弹窗
			toBuy() {
				uni.removeStorageSync('haveSpec')
				if(this.detail.skuList.length >= 1){
					let bool = true;
					this.detail.skuList.forEach(item => {
						if(!item.attributes){
							bool = false
						}
					})
					if(bool){
						this.specsShow = true
					}else{						
						uni.showToast({
								title: '该商品规格数据不正确',
								icon: 'none'
						})
					}
				}else{
					uni.showToast({
							title: '该商品规格数据不正确',
							icon: 'none'
					})
				}
			},
			// 关闭规格弹窗
			closeSpecs() {
				this.specsShow = false
			},
			getProductDetail() {
				productDetail(this.productId).then(res => {
					this.detail = res.data || {}
				})
			},
			toBack() {
				uni.navigateBack()
			},
			toShare() {
				this.$refs.sharePopup.show = true
			},
			// 获取当前时间
			async getCurrentDate() {
				await currentDate().then(res => {
					if(res.code == 200) {
						this.currentDate = res.data || new Date()
					}
				})
			},
			toPay() {
				if(this.detail.auctionStatus != 2) {
					return
				}
				confirmAuction(this.productId).then(res => {
					if(res.code == 200) {
						console.log("res", res)
						this.$refs.successPopup.show = true
						setTimeout(()=>{
							this.$refs.successPopup.show = false
							uni.navigateTo({
								url: '/pages/order/pay/payOrder?orderno='+ res.data + '&timeout='+ res.extend.timeout + '&productCurrentPrice=' + this.detail.productCurrentPrice
							})
						},1500)
					} else {
						this.$msg(res.msg)
						this.getAuctionDetail()
					}
				})
			},
			// 拍卖商品详情
			getAuctionDetail() {
				auctionDetail(this.productId).then(res => {
					this.detail = res.data || {}
					this.timeout = res.extend.timeout || 0
					if(this.detail.auctionStatus == 3) {
						this.timer = setInterval(()=> {
							if(this.timeout>0) {
								this.timeout--
							} else {
								clearInterval(this.timer)
								this.getAuctionDetail()
							}
						},1000)
					}
					if(this.detail.auctionStatus == 4) {
						this.$refs.failPopup.show = true
					}
				})
			},
			transTimestamp(time) {
				let timestamp =  new Date(time.replace(/-/g,'/').replace(/T/g,' ')).getTime() - new Date(this.currentDate.replace(/-/g,'/').replace(/T/g,' ')).getTime()
				return timestamp/1000 || 0
			},
			toLink(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
	}
</style>
<style lang="scss" scoped>
::v-deep .u-countdown-colon {
	color: #ffffff !important;
}
.gxz-lable {
	border: 2rpx solid #FA3121;
	border-radius: 8rpx;
	color: #FA3121;
	padding: 2rpx 14rpx;
	margin-left: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
}
.nav-r {
	.nav-r-icon1 {
		width: 46rpx;
		height: 46rpx;
	}
	.nav-r-icon2 {
		width: 42rpx;
		height: 48rpx;
	}
}
.nav-item {
	width: 56rpx;
	height: 56rpx;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 10rpx;
	margin-right: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.no-bg {
	background: none !important;
}
.goods-img {
	width: 100%;
	height: 690rpx;
}
.user-img {
	width: 80rpx;
	height: 80rpx;
	background: #f2f2f2;
	border-radius: 50rpx;
}
.success-img {
	width: 91rpx;
	height: 78rpx;
}
.process-img {
	width: 66rpx;
	height: 66rpx;
	background: #E60000;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50rpx;
	margin: 24rpx auto 6rpx auto;
	.process1 {
		width: 36rpx;
		height: 32rpx;
	}
	.process2 {
		width: 36rpx;
		height: 36rpx;
	}
	.process3 {
		width: 30rpx;
		height: 30rpx;
	}
}
.process-line1 {
	width: 206rpx;
	height: 4rpx;
	background: #E60000;
	position: absolute;
	top: 56rpx;
	right: -186rpx;
}
.process-line2 {
	width: 206rpx;
	height: 4rpx;
	background: #E60000;
	position: absolute;
	top: 56rpx;
	right: -186rpx;
}
.c-time {
	color: #808080;
	margin-top: 6rpx;
}
.desc-item {
	color: #808080;
	width: 207rpx;
	height: 47rpx;
	background: #F7F7F7;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10rpx 0;
}
.footer-h {
	height: 160rpx;
}
.footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 120rpx;
	background: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	.btn{
		width: 622rpx;
		height: 88rpx;
		background: linear-gradient(42deg, #FF0804 0%, #FC7844 100%);
		border-radius: 16rpx;
		color: #ffffff;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.btn-grey {
		background: #B3B3B3;
	}
}
::v-deep .uParse{
	p {
		display: flex !important;
	}
}

.content-box {
	width: 100%;
	height: 800rpx;
	position: relative;
	z-index: 1;
}

.btnPopup {
	border-radius: 20rpx;
	padding: 14rpx 58rpx;
	width: 80%;
	line-height: 60rpx;
	color: #fff;
	margin: 200rpx auto 20rpx auto;
}
</style>
